<template>
  <!-- 更多按钮海报配置 -->
  <div class="moreBtnConfig">
    <StaryeaLoading v-if="tableData.loading"></StaryeaLoading>
    <div class="bigTitle">更多按钮信息</div>
    <!-- 已配置海报 -->
    <div class="update">
      <div class="nameList">
        <div class="name">已配置海报</div>
        <div class="list" v-if="!disabledType">
          <el-button type="text" @click="addPoster">新增海报</el-button>
          <el-button type="text" @click="configData" :disabled="isDisabled">设置显示</el-button>
          <el-button type="text" style="color:red;" :disabled="JSON.stringify(this.selectItem)=='{}'?true:false" @click="deleteData">删除</el-button>
        </div>
      </div>
      <!-- table -->
      <div class="table" v-if="tableData.data.length>0">
        <!-- header -->
        <div class="colums">
          <div class="colItem" v-for="(item,idx) in tableData.columns" :key="'h'+idx">
            {{item.title}}
          </div>
        </div>
        <!-- bady -->
        <div class="dataBox" :class="item.defaultImg?'color':''"
          v-for="(item,index) in tableData.data" :key="'b'+index" @click="selectData(item)">
          <!-- 单选 -->
          <div class="selcet" :class="item.isChecked?'isChecked':''"></div>
          <div class="item">{{item.imgSequence}}</div>
          <div class="item">{{item.imgName}}</div>
          <div class="item">{{item.imgType | formType}}</div>
        </div>
      </div>
      <!-- 图片预览 -->
      <div class="imgData" v-if="tableData.data.length>0 && preImgUrl !==''">
        <img :src="preImgUrl" alt="">
      </div>
      <div v-if="tableData.data.length<=0"
        style="height:60px;display:flex;color:rgb(205, 205, 205);justify-content:center;align-items:center;">
        暂未配置海报
      </div>
    </div>
    <!-- 链接配置 -->
    <div class="info">
      <div class="label">
        <div>配置链接</div>
      </div>
      <div class="items" v-for="(item,index) in hrefInfo" :key="index">
        <div class="title">{{item.name}}</div>
        <div class="cont">
          <el-input v-model="item.url" placeholder="请输入地址" clearable
            :disabled="disabledType" @focus="focusHref(item)">
            <template slot="prepend">{{item.pre}}</template>
          </el-input>
        </div>
      </div>
    </div>
    <!-- 按钮 -->
    <div class="saveBtn" v-if="!disabledType">
      <el-button round @click="submit" type="primary">
        <span style="margin-right:10px">保</span><span style="margin-left:10px">存</span>
      </el-button>
    </div>

    <!-- 新增海报弹窗 -->
    <Modal v-model="editModal.show" :title="editModal.title" :width="500">
      <div class="info">
        <div class="items">
          <div class="title"><span class="mark">*</span>海报上传</div>
          <div class="cont">
            <el-button type="text" @click="addImage()">本地上传</el-button>
            <el-upload ref="upload" :headers="headers" :action="uploadURL" :data="{adType:'301'}"
              style="display:none" :show-file-list="false"
              :before-upload="handleMaxSize" :on-success="handleSuccess">
            </el-upload>
            <el-button class="posterBtn" type="text" disabled>海报库选择</el-button>
          </div>
        </div>
        <div class="items">
          <div class="title">海报名称</div>
          <div class="cont">
            <el-input v-model="posterInfo.imgName" placeholder="请输入海报名称" disabled></el-input>
          </div>
        </div>
        <div class="items">
          <div class="title"><span class="mark">*</span>海报类型</div>
          <div class="cont">
            <el-select v-model="posterInfo.imgType" placeholder="请选择海报类型" style="width:100%" clearable>
              <el-option v-for="item in options" :key="item.value"
                :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="items">
          <div class="title"><span class="mark">*</span>海报排序</div>
          <div class="cont">
            <el-select v-model="posterInfo.imgSequence" placeholder="请选择海报排序" style="width:100%" clearable>
              <el-option v-for="item in imgType" :key="item.value"
                :label="item.label" :value="item.value">
                <span style="marginRight:5px;">{{item.value}}：</span>
                <span style="color:#8492a6;font-size:13px;">{{item.label}}</span>
              </el-option>
            </el-select>
          </div>
        </div>
        <!-- 图片展示 -->
        <div v-if="posterInfo&&posterInfo.imgUrl!=''" class="preview">
          <div class="name">图片名称：{{posterInfo.imgName}}</div>
          <div class="img">
            <img :src="posterInfo.imgUrl">
            <i @click="deleteImg" class="el-icon-error"></i>
          </div>
        </div>
      </div>
      <div slot="footer">
        <Button @click="handleCancle">取消</Button>
        <Button type="primary" @click="handleOk">确定</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
export default {
  name: "posterConfig",
  props: {
    disabledType:{
      type: Boolean,
      required: true,
    },
    moreBtnInfo:{//海报位
      type: Object,
      required: true,
      default:() =>{}
    },
  },
  data () {
    return {
      headers: {'Auth-Token': '12121'},
      uploadURL: "/iptv/epg/sichuan/categoryaudit/addPictures",
      // 列表数据
      options:[
        {value:0, label:'缩略图'},
        {value:1, label:'海报'},
        {value:2, label:'剧照'},
        {value:3, label:'图标'},
        {value:4, label:'标题图'},
        // {value:5, label:'广告图'},
        // {value:6, label:'草图'},
        {value:7, label:'背景图'},
        // {value:9, label:'频道图片'},
        // {value:10, label:'频道黑白图片'},
        // {value:11, label:'频道LOGO'},
        // {value:12, label:'频道名字图片'},
        {value:13, label:'海报角标'},
        {value:99, label:'其他'},
      ],
      imgType:[
        {value:240, label:'横图(中)'},
        {value:247, label:'竖图(中)'},
        {value:778, label:'横图(大)'},
        {value:999, label:'竖图(大)'},
      ],
      preImgUrl: '',
      // 选中设置默认的海报
      selectItem:{},
      // 设置显示按钮
      isDisabled: false,
      // table
      tableData: {
        columns: [
          { title:'',type:'index' },
          { title:'排序',key:'imgSequence' },
          { title:'海报名称',key:'imgName' },
          { title:'海报类型',key:'imgType' },
        ],
        data: [],
        loading: false
      },
      // 新增弹窗
      editModal:{
        show: false,
        title: '',
      },
      posterInfo:{},
      // 链接配置
      titleBar: this.moreBtnInfo.titleBar,
      hrefInfo:[],
      // 添加的链接
      addHrefInfo:{},
    }
  },
  watch: {
    moreBtnInfo(val1,val2){
      this.initQueryMoreBtn(val1.titleBar.btnCode)
    },
  },
  mounted () {
    this.initQueryMoreBtn(this.titleBar.btnCode);
  },
  methods: {
    // 查询可配置的海报列表
    initQueryMoreBtn(code){
      let _this = this;
      let params ={ floorPageId:this.moreBtnInfo.floorId, sitePageId:code};
      this.tableData.loading = true;
      requestInfoConfig(params,'selectImg').then(res =>{
        let {result_code, result_msg,data} = res;
        if(result_code == 0){
          this.tableData.loading = false;
          if(data != 'null' && data.length>0){
            _this.isDisabled = false;
            _this.preImgUrl = "";
            data.forEach(item =>{
              item.isChecked = false;
              if(item.defaultImg == true){
                _this.preImgUrl = item.imgUrl;
              }
            })
            _this.tableData.data = data;
          } else {
            _this.tableData.data = [];
            _this.isDisabled = true;
          }
          _this.initQueryHref();
        } else {
          this.$Message.error(result_msg || this.$cfg.COMMONERRORMSG);
        }
      })
    },
    // 查询链接配置
    initQueryHref(){
      let params = {
        floorPageId: this.moreBtnInfo.floorId,
        sitePageId: this.moreBtnInfo.titleBar.btnCode,
      }
      requestInfoConfig(params,'selecBasic').then(res =>{
        let {result_code, result_msg,data} = res;
        if(result_code == 0){
          if(data!='null' && data.hrefInfo.length>0){
            this.hrefInfo = data.hrefInfo;
          } else {
            this.hrefInfo = [
              {url:"",pre:"Z@U@",name:"中兴",sequence:1},
              {url:"",pre:"H@U@",name:"华为",sequence:2},
              {url:"",pre:"E@U@",name:"EPG3.0",sequence:3},
              {url:"",pre:"A@U@",name:"APK",sequence:4},
            ];
          }
        } else {
          this.$Message.error(result_msg || this.$cfg.COMMONERRORMSG);
        }
      })
    },
    // 选择海报
    selectData(data){
      if(this.disabledType == true) return ;
      this.isDisabled = data.defaultImg;
      this.preImgUrl = data.imgUrl;
      this.selectItem = data;
      this.tableData.data.forEach(item =>{
        if(data.id == item.id){
          item.isChecked = true;
        } else {
          item.isChecked = false;
        }
      })
    },
    // 设置海报
    configData(){
      let _this = this;
      if(JSON.stringify(this.selectItem) == '{}'){
        this.$message({message:'请选择要设置的海报',type:'warning'});
      } else {
        this.moreBtnInfo.titleBar.btnImg = this.selectItem.imgUrl;
        let params = {
          floorPageId:this.moreBtnInfo.floorId,
          sitePageId: this.moreBtnInfo.titleBar.btnCode,
          imgSequence:this.selectItem.imgSequence,
          imgType: this.selectItem.imgType,
          modularJsonStr: JSON.stringify({
            comList: this.moreBtnInfo.comList,
            modelH: this.moreBtnInfo.modelH,
            titleBar: this.moreBtnInfo.titleBar
          })
        }
        requestInfoConfig(params,'setDefaultImg').then(res =>{
          let {result_code, result_msg} = res;
          if(result_code == 0){
            this.$message({message:'设置成功',type:'success'});
            _this.preImgUrl = "";
            _this.initQueryMoreBtn(_this.titleBar.btnCode);
          } else {
            this.$Message.error(result_msg || this.$cfg.COMMONERRORMSG);
          }
        })
      }
    },
    // 删除
    deleteData(){
      let _this = this;
      let modularJsonStr = "";
      if(JSON.stringify(this.selectItem) == '{}'){
        this.$message({message:'请选择要删除的海报',type:'warning'});
      } else {
        this.$Modal.confirm({
          title: '删除提醒',
          content: '确定删除该条内容？',
          loading: true,
          onOk: function () {
            if(_this.selectItem.defaultImg == true){
              _this.moreBtnInfo.titleBar.btnImg = "";
              modularJsonStr = JSON.stringify({
                comList: _this.moreBtnInfo.comList,
                modelH: _this.moreBtnInfo.modelH,
                titleBar: _this.moreBtnInfo.titleBar
              })
            } else {
              modularJsonStr = "";
            }
            let params = {
              id: _this.selectItem.id,
              floorPageId:_this.moreBtnInfo.floorId,
              sitePageId: _this.moreBtnInfo.titleBar.btnCode,
              imgId: _this.selectItem.imgId,
              defaultImg: _this.selectItem.defaultImg,
              modularJsonStr: modularJsonStr
            }
            requestInfoConfig(params,"deleteImg").then(res => {
              let {result_code, result_msg} = res;
              if(result_code == 0){
                this.$message({message:'删除成功',type:'success'});
                this.$Modal.remove();
                _this.preImgUrl = "";
                _this.initQueryMoreBtn(_this.titleBar.btnCode);
              } else {
                this.$Message.error(result_msg || this.$cfg.COMMONERRORMSG);
              }
            })
          }
        })
      }
    },
    // 链接配置
    focusHref(item){
      this.$emit('hrefUrlModel',item,true)
    },
    // 保存
    submit(){
      let _this = this;
      let position = {
        floorPageId:this.moreBtnInfo.floorId,
        sitePageId: this.titleBar.btnCode,
        hrefInfo: JSON.stringify(this.hrefInfo)
      }
      requestInfoConfig(position,'savePositionLink').then(res =>{
        let {result_code, result_msg} = res;
        if(result_code == 0){
          this.$message({message:'保存链接地址成功',type:'success'});
          _this.initQueryMoreBtn(_this.titleBar.btnCode);
        } else {
          this.$Message.error(result_msg || this.$cfg.COMMONERRORMSG);
        }
      })
    },

    /******** 新增 ********/
    // 新增海报
    addPoster(){
      this.editModal.show = true;
      this.editModal.title = '新增海报';
      this.posterInfo = {
        imgName:'',
        imgUrl:'',
        imgType:null,
        imgSequence: null,
        sequence:'',
        detail:'',
        imgSource:1,
        linkType:3,
        version:1,
        sitePageId: this.titleBar.btnCode,
        floorPageId:this.moreBtnInfo.floorId,
      }
    },
    // 上传图片
    addImage(){
      this.$refs['upload'].$children[0].$refs.input.click();
    },
    // 大小格式校验
    handleMaxSize(file){
      let typeParams = ['jpg','jpeg','png'];
      if(typeParams.indexOf(file.type.split('/')[1]) == -1){
        this.$Message.error("请上传图片格式jpg,jpeg,png")
      } else if((file.size / (1024 * 1024)) >= 1) {
        this.$Message.error("请上传小于1M的图片")
      }
    },
    // 上传成功
    handleSuccess(res, file){
      let imgUrl = res.data.fileByteUrl;
      this.posterInfo.imgName = file.name;
      this.posterInfo.imgUrl = imgUrl;
    },
    // 删除图片
    deleteImg(){
      this.posterInfo.imgName = "";
      this.posterInfo.imgUrl = "";
    },
    // 保存新增
    handleOk(){
      let _this = this;
      this.posterInfo.sequence = this.posterInfo.imgSequence;
      if(this.posterInfo.imgType==null || this.posterInfo.imgSequence==null ||
        this.posterInfo.imgUrl==''){
        this.$message({message:'您还有必填项未填，请检查！',type:'warning'});
      } else {
        console.log(this.posterInfo);
        requestInfoConfig(this.posterInfo,'insertImg').then(res =>{
          let {result_code, result_msg} = res;
          if(result_code == 0){
            this.$message({message:'保存成功',type:'success'});
            _this.initQueryMoreBtn(this.titleBar.btnCode);
            _this.editModal.show = false;
            _this.posterInfo = {};
          } else {
            this.$Message.error(result_msg || this.$cfg.COMMONERRORMSG);
          }
        })
      }
    },
    // 关闭弹窗
    handleCancle(){
      this.editModal.show = false;
      this.posterInfo = {};
    },
  },
  filters:{
    // 海报类型翻译
    formType(val){
      if(val == 0){
        return '缩略图'
      } else if(val == 1){
        return '海报'
      } else if(val == 2){
        return '剧照'
      } else if(val == 3){
        return '图标'
      } else if(val == 4){
        return '标题图'
      } else if(val == 7){
        return '背景图'
      } else if(val == 13){
        return '海报角标'
      } else if(val == 99){
        return '其他'
      }
    },
  }
}
</script>

<style lang="less" scoped>
.moreBtnConfig {
  overflow: hidden;
  position: relative;
  margin-top: 20px;
  margin-left: 5px;
  margin-bottom: 20px;
  // 标题
  .bigTitle{
    margin-left: 15px;
    font-weight: bold;
  }
  // 已配置海报
  .update{
    .nameList{
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 15px 20px;
      .name{
        font-weight: bold;
      }
    }
    .table{
      .colums{
        background-color: #F0F2F5;
        padding: 0px !important;
        .colItem{
          margin: 8px 0;
          width: 105px;
          text-align: center;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          &:nth-child(1){
            margin: 8px 10px;
            width: 15px;
            height: 15px;
          }
          &:nth-child(2){
            width: 30px;
          }
        }
      }
      .colums, .dataBox{
        display: flex;
        align-items: center;
        justify-content: space-around;
        border: 1px solid #e8eaec;
        border-bottom: none;
      }
      .dataBox{
        &:nth-last-child(1){
          border: 1px solid #e8eaec;
        }
        .item{
          margin: 13px 0;
          width: 105px;
          text-align: center;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          &:nth-child(2){
            width: 30px;
          }
        }
        .selcet{
          display: inline-block;
          position: relative;
          border: 1px solid #dcdfe6;
          border-radius: 2px;
          box-sizing: border-box;
          margin: 10px;
          width: 15px;
          height: 15px;
          background-color: #fff;
          z-index: 1;
          transition: border-color .25s cubic-bezier(.71,-.46,.29,1.46),background-color .25s cubic-bezier(.71,-.46,.29,1.46);
          &::after{
            box-sizing: content-box;
            content: "";
            border: 1px solid #fff;
            border-left: 0;
            border-top: 0;
            height: 7px;
            left: 4px;
            position: absolute;
            top: 1px;
            transform: rotate(45deg) scaleY(0);
            width: 3px;
            transition: transform .15s ease-in .05s;
            transform-origin: center;
          }

        }
        .isChecked {
          background-color: #409eff;
          border-color: #409eff;
          &::after{
            transform: rotate(45deg) scaleY(1);
          }
        }
      }
      .color{
        color: #409eff;
      }
    }
    .imgData{
      margin: 20px 15px;
      border: 2px dashed #8DBEFE;
      height: 150px;
      img{
        padding: 10px 40px;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
  // 链接配置
  .info{
    margin: 15px 20px;
    .label{
      font-weight: bold;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .items{
      width: 100%;
      margin: 8px 0px;
      display: flex;
      align-items: center;
      .title{
        position: relative;
        width: 40px;
        margin-right: 10px;
        text-align: right;
        color: #CFCFD2;
        .mark{
          font-family: SimSun;
          font-size: 14px;
          color: #ed4014;
          position: absolute;
          left: -8px;
        }
      }
      .cont{
        width: calc(100% - 50px);
        display: flex;
        align-items: center;
      }
    }
  }
  .saveBtn{
    margin-top: 25px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
  }
}
</style>

<style lang="less" scoped>
// input
/deep/ .el-input__inner{
  padding: 0px 10px;
  height: 35px;
  line-height: 35px;
}
// 前缀 input
/deep/ .el-input-group__prepend{
  padding: 0 4px !important;
}
// textarea
/deep/ .el-textarea__inner{
  resize:none;
  padding: 5px 10px;
}
// 按钮
/deep/ .el-button.is-round{
  padding: 8px 40px;
  border-radius: 15px;
}
/deep/ .el-button--primary{
  background-color: #3089fd;
  border-color: #3089fd;
}
/deep/ .el-button--primary:focus, .el-button--primary:hover{
  background: #66b1ff;
  border-color: #66b1ff;
  color: #FFF;
}
// table
/deep/ .ivu-table-cell{
  padding: 0;
}
/deep/ .ivu-table th{
  background-color: #F0F2F5 !important;
  font-weight: normal;
}
// 新增弹窗
/deep/ .ivu-modal-body .info{
  margin: 15px 20px;
  .items{
    width: 100%;
    margin: 8px 0px;
    display: flex;
    align-items: center;
    .title{
      position: relative;
      width: 60px;
      margin-right: 20px;
      text-align: right;
      color: #CFCFD2;
      .mark{
        font-family: SimSun;
        font-size: 14px;
        color: #ed4014;
        position: absolute;
        left: -8px;
      }
    }
    .cont{
      width: calc(100% - 70px);
      display: flex;
      align-items: center;
      .posterBtn{
        margin-left: 30px;
      }
    }
  }
  .preview{
    margin-left: 80px;
    margin-bottom: 10px;
    .name{
      margin-bottom: 5px;
    }
    .img{
      position: relative;
      width: 200px;
      height: 120px;
      img{
        width: 100%;
        height: 100%;
      }
      &:hover{
        cursor: pointer;
        .el-icon-error{
          display: block;
        }
      }
    }
    .el-icon-error{
      position: absolute;
      right: 0;
      top: 0;
      display: none;
      color: red;
      font-size: 25px;
      cursor: pointer;
      z-index: 9999;
    }
  }
}
</style>

